<template>
    <div class="game">
        <Player
            v-for="(player, index) in playerNum"
            :key="index"
            v-bind="player"
            @update="players[index] = $event"
        />
    </div>
</template>
<script lang="ts">
    import { map } from 'lodash-es';
    import { defineComponent, onUpdated, onMounted, PropType } from 'vue';
    import Player from '@components/player.vue';
    import useSocket from '@hooks/game/socket';
    import useSon from '@hooks/connect/son';
    import useFather from '@hooks/connect/father';

    export default defineComponent({
        name: 'Game',
        components: { Player },
        props: {
            socketId: String,
            gameType: {
                type: String as PropType<gameType>,
                default: 'local',
            },
            mode: {
                type: String as PropType<mode>,
                default: 'identity',
            },
            cardPile: {
                type: String as PropType<cardPileType>,
                default: 'junzheng',
            },
            playerNum: {
                type: Number,
                default: 3,
            },
        },
        setup(props) {
            console.clear();
            const players: players = new Array(props.playerNum);
            // 当儿子👦
            if (props.gameType === 'online') {
                const socket = useSocket(+props.socketId!);
                useSon(socket);
            } else {
                // 当爸爸👨
                const config: modeConfig = {
                    type: 'online',
                    mode: 'identity',
                    cardPile: 'junzheng',
                    playerNum: 3,
                    eHubs: map(players, i => i.eHub),
                };
                useFather(config);
            }

            onUpdated(() => {
                console.log('game已更新');
            });
            onMounted(async () => {
                console.log('Game Mounted');
            });

            return {
                players,
            };
        },
    });
</script>
<style scoped lang="scss">
    .game {
        display: flex;
        align-items: center;
        justify-content: space-evenly;
        width: 100%;
        height: 100%;

        .btn {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 150px;
            height: 220px;
            border: 2px solid blueviolet;
            border-radius: 5px;
            font-size: 24px;
        }
    }
</style>
